<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="/typo3conf/ext/powermail/Resources/Public/Css/Backend.css">
	<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script language="javascript" type="text/javascript" src="/typo3conf/ext/powermail/Resources/Public/JavaScripts/Libraries/jquery.flot.min.js"></script>
	<script language="javascript" type="text/javascript" src="/typo3conf/ext/powermail/Resources/Public/JavaScripts/Libraries/jquery.flot.pie.min.js"></script>
	<script language="javascript" type="text/javascript" src="/typo3conf/ext/powermail/Resources/Public/JavaScripts/Powermail/Backend.min.js"></script>
	<script type="text/javascript">
		$(function() {
			var data = [
				{label: "Series1",  data: 10, color: '#FF9900'},
				{label: "Series2",  data: 30, color: '#FFA722'},
				{label: "Series3",  data: 90, color: '#FFB444'},
				{label: "Series4",  data: 70, color: '#FFC266'},
				{label: "Series5",  data: 80, color: '#FFD088'},
				{label: "Series6",  data: 110, color: '#FFDDAA'}
			];
			$.plot('#xxx', data, {
				series: {
					pie: {
						show: true,
						innerRadius: 0.5,
						radius: 1,
						opacity: 0.3,
						color: '#FF0000',
						label: {
							show: true,
							radius: 1,
							formatter: labelFormatter1,
							background: {
								opacity: 0.8
							}
						},
						combine: {
							color: '#999',
							threshold: 0.1
						}

					}
				}
			});
			function labelFormatter1(label, series) {
				return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
			}
		});
	</script>
</head>
<body>
	<div id="content">
		<div class="demo" style="width: 600px; border: 1px solid #888;">
			<div style="width: 800px; max-width: 100%;" class="flotContainer" data-flot-active="1" data-flot-data-colors="#FF9900, #FFA722, #FFB444, #FFC266, #FFD088, #FFDDAA, #FFEBCC" data-flot-data-values="73" data-flot-data-labels="Auto"></div>
		</div>
		<div class="demo" style="width: 600px; border: 1px solid #888;">
			<div style="width: 800px; max-width: 100%;" class="flotContainer" data-flot-active="1" data-flot-data-colors="#FF9900, #FFA722, #FFB444, #FFC266, #FFD088, #FFDDAA, #FFEBCC" data-flot-data-values="22, 33, 41, 3, 84, 18" data-flot-data-labels="TYPO3, Joomla, Drupal, Sharepoint, Wordpress, Contao"></div>
		</div>

		<div id="xxx" style="width: 600px; height: 200px;"></div>
	</div>
</body>
</html>
